<template>
	<view class="project-profit-view">
		<view class="main-basic-box">
			<view class="main-basic-name">收入构成<text>（本月）</text></view>
			<view class="fx-center">
				<view class="profit-item">
					<view class="num">¥{{totalCount}}</view>
					<view class="">总收入</view>
				</view>
				<view class="profit-item">
					<view class="num">¥{{orderCount}}</view>
					<view class="">订单佣金</view>
				</view>
				<view class="profit-item">
					<view class="num">¥{{clueCount}}</view>
					<view class="">客资佣金</view>
				</view>
			</view>
			<view class="fx-center">
				<view class="profit-item">
					<view class="num">¥{{promoCount}}</view>
					<view class="">品宣佣金</view>
				</view>
				<view class="profit-item"></view>
				<view class="profit-item"></view>
			</view>
		</view>
		<view class="main-basic-box">
			<view class="main-basic-name">收入明细</view>
			<view class="month-list" v-for="(item,index) in list" :key="index" v-if="list.length>0">
				<view class="fx-center-between month-total">
					<view class="month-text">
						{{item.month}}<text>月</text>
					</view>
					<view class="profit-total">
						收入 ¥{{item.earn}}
					</view>
				</view>
				<view class="profit-list" v-for="it in item.list" :key="it.id">
					<view class="fx-center-between">
						<view class="fx-center">
							<image src="/static/money_icon.png" mode="widthFix" class="money-icon"></image>
							<view class="">
								{{it.order_typename}}
								<van-tag color="#F1F3F6" text-color="#8A8F99" v-if="it.order_type==4">不计入提现金额</van-tag>
							</view>
						</view>
						<view class="">+{{it.earn}}</view>
					</view>
					<view class="profit-time">{{it.time}}</view>
				</view>
			</view>
			<view class="main-no-data" v-else>
				<image src="/static/empty_img.png" mode="widthFix"></image>
				<view class="">暂无数据</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				totalCount: 0, //总收入
				orderCount: 0, //订单佣金
				clueCount: 0, //客资佣金
				promoCount: 0, //品宣佣金
				pid: null,
				total: 0,
				page: 1,
				list: [],
			};
		},
		onLoad(e) {
			if (e.pid) {
				this.pid = e.pid
				this.getCount()
				this.getList()
			}

		},
		onReachBottom() {
			if (this.total < this.list.length) {
				this.page++
				this.getList()
			}
		},
		methods: {
			getCount() {
				this.$api.requst(`/gwc/projects/${this.pid}/earn`, {
					type: 1
				}).then((res) => {
					this.orderCount = res.data.order
					this.totalCount = res.data.total
					this.clueCount = res.data.clue
					this.promoCount = res.data.promo
				})
			},
			getList() {
				this.$api.requst(`/gwc/projects/${this.pid}/orders`, {
					page: this.page,
					id: this.pid
				}).then((res) => {
					this.total = res.total
					if (this.page === 1) {
						this.list = res.data
					} else {
						res.data.forEach(item => {
							this.list.push(item)
						})
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.project-profit-view {
		.main-basic-name {
			text {
				font-size: 26rpx;
				color: #8A8F99;
				font-weight: normal;
			}
		}

		.profit-item {
			flex: 1;
			text-align: center;
			margin-top: 32rpx;
			color: #161616;
			font-size: 26rpx;

			.num {
				font-weight: bold;
				margin-bottom: 8rpx;
				font-size: 32rpx;
			}
		}

		.month-total {
			margin-top: 32rpx;

			.month-text {
				font-size: 36rpx;
				font-weight: bold;

				text {
					font-size: 30rpx;
				}
			}

			.profit-total {
				font-size: 26rpx;
				color: #8A8F99;
			}
		}

		.profit-list {
			margin-top: 32rpx;
			font-size: 30rpx;


			.money-icon {
				width: 38rpx;
				height: 38rpx;
				flex-shrink: 0;
				margin-right: 14rpx;
			}

			.profit-time {
				font-size: 22rpx;
				color: #8A8F99;
				margin-top: 16rpx;
				margin-left: 52rpx;
			}
		}

		.month-list:not(:last-child) {
			padding-bottom: 32rpx;
			border-bottom: 1rpx solid #E2E2E2;
		}
	}
</style>